<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 55px;
  right: 0;
  background: #fff;

  .pay-bg {
    width: 100%;
    height: 168px;
    background: url("https://twwl.oss-cn-shenzhen.aliyuncs.com/zhifubao_bg.png") center center
      no-repeat;
    background-size: 100% 100%;
  }
  .user-icon {
    width: 55px;
    height: 55px;
    display: block;
    background: url("https://twwl.oss-cn-shenzhen.aliyuncs.com/yuan.png") center center
      no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .wrap {
    width: 86px;
    height: 55px;
    span {
      display: block;
      width: 50px;
      height: 10px;
      background: url("/static/ethel_img/pinless_arrows_right@2x.png") center
        center no-repeat;
      background-size: 100% 100%;
    }
    span:last-child {
      margin-top: 10px;
      background: url("/static/ethel_img/pinless_arrows_left@2x.png") center
        center no-repeat;
      background-size: 100% 100%;
    }
  }
  .pay-info {
    width: 100%;
    height: auto;
    padding: 50px 10px 0;
    .cell {
      width: 100%;
      height: 70px;
      line-height: 70px;
      font-size: 17px;
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .btn {
    width: 90%;
    height: 50px;
    line-height: 50px;
    outline: none;
    border: none;
    margin: 60px auto 0px;
    font-size: 18px;
    display: block;
  }
  .py-text {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: rgba(178, 178, 178, 1);
    margin-top: 20px;
  }
}
</style>

<template>
  <div class="myTeam">
    <ComHeader title="绑定支付宝" leftArrow="true"/>
    <div class="container">
      <div class="pay-bg flex-display flex-center-pack flex-center-align">
        <div class="user-icon">
          <img :src="ethelWxUserInfo.headimgurl">
        </div>
        <div class="wrap flex-display flex-display-column flex-center-align flex-center-pack">
          <span></span>
          <span></span>
        </div>
        <div class="user-icon">
          <img src="https://twwl.oss-cn-shenzhen.aliyuncs.com/zhifubao.png">
        </div>
      </div>
      <div class="pay-info">
        <div class="cell flex-row-between">
          <input type="text" placeholder="请输入真实姓名" v-model="payname" >
        </div>
        <div class="cell flex-row-between">
          <input type="text" placeholder="请输入支付宝账号" v-model="payNumber">
        </div>
        
        <button class="btn theme-background" @click="fnCommit">{{btnName}}</button>
        <p class="py-text">请谨慎输入支付宝账号，避免财产丢失。</p>
      </div>
    </div>
    <!-- <div style="padding-top: 60px;"></div>
    <div v-if="!ethelWxUserInfo.ali_account">
      <ul class="flex-column-start">
        <li class="flex-row-between code-li">
          <div>
            <input type="tel" placeholder="请输入手机号" v-model="phonenumber" minlength="11" maxlength="11">
          </div>
          <div class="getcode-btn flex-column-center" @click="fnGetCode()" id="getcode-btn" ref="code"
            :class="{'btn-disabled':isdisabled}">获取验证码</div>
        </li>
        <li class="flex-row-between code-li">
          <div>
            <input type="text" placeholder="验证码" v-model="code">
          </div>
          <div @click="fnClearCode('code')">
            <img src="../../static/ethel_img/icon_cloes.png" alt="" class="code-img">
          </div>
        </li>
        <li class="flex-row-between code-li">
          <div>
            <input type="text" placeholder="支付宝账号" v-model="zfbNumber">
          </div>
          <div @click="fnClearCode('zfbNumber')">
            <img src="../../static/ethel_img/icon_cloes.png" class="code-img">
          </div>
        </li>
      </ul>
      <div class="flex-column-center commit" @click="fnCommit()">
        确定
      </div>
    </div>
    <div v-else class="code-li flex-row-start">
      已绑定支付宝账号{{ethelWxUserInfo.ali_account}}
    </div>-->
  </div>
</template>

<script>
import api from "@/fetch/api";
import axios from "axios";
import ComHeader from "@/common/ComHeader";
import ComFooter from "@/common/ComFooter";
import Loading from "@/base/loading/loading";
import Scroll from "@/base/scroll/scroll";
import {
  MessageBox,
  Spinner,
  Button,
  Toast,
  Picker,
  Field,
  Indicator
} from "mint-ui";
export default {
  name: "bindzfb",
  data() {
    return {
      payname: "", // 支付宝名称
      btnName: '保存', // 按钮名称
      payNumber: "" // 支付包号码
    };
  },
  components: {
    ComHeader,
    MessageBox,
    Spinner,
    Button,
    Toast,
    Picker,
    Field,
    ComFooter,
    Loading,
    Scroll,
    Indicator
  },
  created() {
    // 个人信息
    this.ethelWxUserInfo = window.localStorage.getItem(this.companyUnique)? JSON.parse(window.localStorage.getItem(this.companyUnique)) : "";
    if(this.ethelWxUserInfo.ali_account) {
      this.btnName = '重新绑定'
      this.payNumber = this.ethelWxUserInfo.ali_account
      this.payname = this.ethelWxUserInfo.realname
    }
  },
  methods: {
    // 提交
    fnCommit() {
      let msg = !this.payname
        ? "请输入支付宝名称"
        : !this.payNumber
        ? "请输入支付宝账号"
        : "";
      if (msg) {
        Toast(msg);
        return;
      }
      var params = {
        modify_type: "ali_id",
        ali_account: this.payNumber,
        ope_type: "bind",
        uid: this.ethelWxUserInfo.id,
        realname: this.payname
      };
      Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
      api.bindUserPay(params).catch(res => {
        console.log(res)
        if(res.status ==200 && !res.data.code) {
          Toast('绑定成功')
          this.ethelWxUserInfo.ali_account = this.payNumber
          this.ethelWxUserInfo.realname = this.payname
          window.localStorage.setItem(this.companyUnique, JSON.stringify(this.ethelWxUserInfo))
        }
        Indicator.close()
        
      }).then(err => {
        Indicator.close()
      })
    }
  }
};
</script>



